<template>
  <div class="w-80 h-full">
    <Draggable
      class="components-draggable"
      :list="list"
      :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
      :clone="cloneComponent"
      :sort="false"
      @end="onEnd"
    >
      <div
        v-for="(element, index) in list"
        :key="index"
        class="components-item"
      >
        <!--                  @click="addComponent(element)"-->
        <div class="components-body">
          {{ element.componentName }}
        </div>
      </div>
    </Draggable>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
let global = 1;
let tempActiveData;
export default {
  name: "generate-layout-left",
  components: {
    Draggable,
  },
  data() {
    return {
      list: [
        {
          defaultValue: {
            value: "",
            defaultValue: "",
            label: "输入框",
            form: "input",
            params: {},
          },
          render: "gen-input",
          componentName: "单行文本",
          __type__: "form",
          // __col__: JSON.parse(JSON.stringify(__mcol__)),
          __config__: {
            field: {
              value: "",
              label: "字段变量",
              form: "el-input",
              type: "string",
              params: {
                size: "small",
              },
            },
            label: {
              value: "字段名称",
              label: "标题",
              type: "string",
              form: "el-input",
              params: {
                size: "small",
              },
            },
          },
          __field_props__: {
            maxlength: {
              value: null,
              label: "最多输入",
              isVar: true,
              form: "input",
              params: {},
              append: {
                text: "选择",
                params: {
                  icon: "el-icon-thumb",
                },
              },
            },
            readonly: {
              value: false,
              label: "是否只读",
              isVar: true,
              form: "switch",
              params: {},
            },
            disabled: {
              value: false,
              label: "是否禁用",
              form: "switch",
              params: {},
            },
            aaa: {
              value: [],
              label: "测试",
              form: "parse-array-object",
              __data_struct__: {
                name: {
                  value: "",
                  type: "string",
                  defaultValue: "",
                  label: "名称",
                  form: "input",
                  __props__: {},
                },
                value: {
                  value: 4,
                  type: "string",
                  defaultValue: "",
                  label: "值",
                  form: "input-number",
                  __props__: {},
                },
                modification: {
                  value: 3,
                  type: "string",
                  defaultValue: "",
                  label: "11值",
                  form: "slider",
                  __props__: {},
                },
              },
              __props__: {},
            },
          },
          // 正则校验规则
          validators: [],
        },
        {
          defaultValue: {
            value: [],
            defaultValue: [],
            label: "级联选择器",
            form: "input",
            params: {},
          },
          render: "gen-cascader",
          componentName: "级联选择器",
          __type__: "form",
          // __col__: JSON.parse(JSON.stringify(__mcol__)),
          element: `
            <el-cascader {{props}}></el-cascader>
          `,
          antd: `
            <t-cascader {{props}}></t-cascader>
          `,
          uview: `
            <u-cascader {{props}}></u-cascader>
          `,
          importPc: `
            import request from "@/utils/request"
          `,
          importM: ``,
          method: `
              load{{__config__.field.value}}Data(data,callback){
                    if(data.first){
                  request.request({
                    url: "{{__field_props__.first-url.value}}",
                    method: "{{__field_props__.first-method.value}}"
                  }).then(res=>{
                    callback(res.{{__field_props__.first-response-key.value}})
                  })
                }else{
                  request.request({
                    url: "{{__field_props__.other-url.value}}",
                    method: "{{__field_props__.other-method.value}}"
                  }).then(res=>{
                    callback(res.{{__field_props__.response-key.value}})
                  })
                }
              }
          `,
          __config__: {
            field: {
              value: "",
              defaultValue: "",
              label: "字段变量",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
            label: {
              value: "字段名称",
              defaultValue: "",
              label: "标题",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
          },
          __field_props__: {
            "change-on-select": {
              value: false,
              defaultValue: false,
              effect: "prop",
              type: "boolean",
              label: "交互选中",
              form: "switch",
              params: {},
            },
            "first-url": {
              value: "http://rap2api.taobao.org/app/mock/283968/get/select",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "第一次请求地址",
              form: "input",
              params: {},
            },
            "first-response-key": {
              value: "data",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "结果获取",
              form: "input",
              params: {},
            },
            "first-method": {
              value: "get",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "第一次请求方式",
              form: "input",
              params: {},
            },
            "other-url": {
              value: "http://rap2api.taobao.org/app/mock/283968/get/select",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "其他请求地址",
              form: "input",
              params: {},
            },
            "other-method": {
              value: "get",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "其他请求方式",
              form: "input",
              params: {},
            },
            "response-key": {
              value: "data",
              defaultValue: "",
              effect: "other",
              type: "string",
              label: "结果获取",
              form: "input",
              params: {},
            },
          },
          // 正则校验规则
          validators: [],
        },
        {
          defaultValue: {
            value: false,
            defaultValue: [],
            label: "开关选择器",
            form: "switch",
            params: {},
          },
          render: "gen-switch",
          componentName: "开关",
          __type__: "form",
          __config__: {
            field: {
              value: "",
              defaultValue: "",
              label: "字段变量",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
            label: {
              value: "开关",
              defaultValue: "",
              label: "标题",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
          },
          __field_props__: {
            readonly: {
              value: false,
              label: "是否只读",
              isVar: true,
              form: "switch",
              params: {},
            },
            disabled: {
              value: false,
              label: "是否禁用",
              form: "switch",
              params: {},
            },
          },
          validators: [],
        },
        {
          defaultValue: {
            value: [],
            list:["Online","Promotion","Offline"],
            defaultValue: [],
            label: "复选框",
            form: "checkbox",
            params: {},
          },
          render: "gen-checkbox",
          componentName: "复选框",
          __type__: "form",
          __config__: {
            field: {
              value: "",
              defaultValue: "",
              label: "字段变量",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
            label: {
              value: "开关",
              defaultValue: "",
              label: "标题",
              effect: "prop",
              type: "string",
              form: "input",
              params: {},
            },
          },
          __field_props__: {
            readonly: {
              value: false,
              label: "是否只读",
              isVar: true,
              form: "switch",
              params: {},
            },
            disabled: {
              value: false,
              label: "是否禁用",
              form: "switch",
              params: {},
            },
          },
          validators: [],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    cloneComponent(origin) {
      const nOrigin = JSON.parse(JSON.stringify(origin));
      nOrigin.id = global++;
      if (nOrigin.__type__ === "form") {
        nOrigin.__config__.field.value = "field" + global;
      }

      tempActiveData = nOrigin;
      return nOrigin;
    },
    onEnd(obj) {
      if (obj.from !== obj.to) {
        this.$emit("input", global - 1);
        this.$emit("sync-data", tempActiveData);
      }
    },
  },
};
</script>

<style scoped>
.components-draggable {
  display: flex;
  flex-wrap: wrap;
}
.components-item {
  padding: 5px 10px;
  border: 1px solid rgb(116, 183, 192);
  margin: 4px;
  /* border-radius: 10px; */
}
</style>
